<template>
	<div v-if="isShow">
		<div class="sutdent">
		
			<div class="header" style="display: flex;" >
				<span style="position: relative;left: 400px;font-size: 20px;" >校园公告</span>
						<div style="display: flex;margin: 10px 0px;margin-left: 740px" >
							<el-input v-model="input" style="width: 340px;margin: 0 4px;" placeholder="请输入关键词" clearable />
							<el-button type="primary" @click="search">搜索</el-button>
						</div>
			</div>
			<div class="content">
				<el-card class="card" v-for="it in titleList" :key="it.title_id" @click="goTo(it.title_id)" >
					<div class="card_content">
						<div class="card_img">
							<el-image style="width: 100%; height: 100%; border-radius: 10px" :src="it.title_img" fit="fit" />
						</div>
						<div class="card_tent">
							<div>
								<h3>{{ it.title }}</h3>
								<p>{{ it.title_content }}</p>
								<span style="font-size: 12px; color: #a8abb2">时间:{{ it.title_time }}</span>
							</div>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
	<div v-else>
		<TitleDateils :id="TtileId"></TitleDateils>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getHomeInfo } from "@/api/student/home";
import TitleDateils from "./component/TitleDateils.vue"
const titleList = ref([]);
const TtileId = ref('');
const input = ref("");
const isShow =ref(true);
const currentPage4 = ref(1);
const pageSize4 = ref(100);
const getTitle = async () => {
	try {
		const res = await getHomeInfo();
		if (res.data.code === 200) {
			console.log(res.data.data)
			let arr = res.data.data.filter(it=>it.title_state === 1);
			titleList.value = [...arr];
			// console.log(res.data.data)
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 搜索
const search = () => {
	if (!input.value) {
		ElMessage({
			message: "暂未输入关键字",
			type: "error"
		});
		return;
	}
	const _data = titleList.value;
	let arr = [];
	_data.forEach(it=>{
		if(it?.title.includes(input.value) || it?.title_content.includes(input.value)){
			arr.push(it);
		}
	});
	if(arr.length >0){
		ElMessage({
			message: "搜索成功",
			type: "success"
		});
		titleList.value = arr;
	}else{
		ElMessage({
			message: "公告不存在或关键字有误",
			type: "waring"
		});
		return;
	}
};
// 跳转到详细页面
const goTo = (id)=>{
	TtileId.value = id;
	// debugger
	isShow.value = false;
}
onMounted(() => {
	getTitle();
});
</script>

<style scoped lang="scss">
.header {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
}
.content {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	// border:1px solid red;
	// margin: 0px 20px;
	.card {
		width: 48%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:10px;
		height: 200px;
		// overflow: auto;
		border-radius: 50px;
		.card_content {
			width: 90%;
			margin: 10px;
			display: flex;

			align-items: center;

			.card_img {
				border-radius: 5px;
				width: 40%;
				height: 100%;
			}
			.card_tent {
				margin-left: 60px;
			}
		}
	}
	.fy {
		width: 100%;
		height: 50px;
		border: 1px solid red;
	}
}
</style>
